<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点名系统</title>
		<style type="text/css">
		    *{
		    	box-sizing: border-box;
		    }
			div{
				width: 250px;
				height: 220px;
				background: blueviolet;
				margin:  50px auto;
				text-align: center;
				border: 2px dotted black;
				color: white;
				border-radius: 8px;
				
			}
			h3{
				margin: 0;
				height: 40px;
				background:orangered ;		
				border-top-left-radius:8px ;
				border-top-right-radius:8px ;
				line-height: 35px;
			}
			p{
				margin: 30px;
			}
			span{
				font-size: 22px;
			}
			button{
				border: none;
				font-size: 30px;
				border-radius: 8px;
				padding: 3px 15px;
				margin: 10px;
				cursor: pointer;
			}
			button:hover{
				border: 1px solid black;
				background: orange;
				color: purple;
			}
		</style>
	</head>
	<body>
		<div>
			<h3 style="color:white;"> 点 名 系 统 </h3>
			<p><span> * * * </span></p>
			<button type="button"> 开始 </button>
		</div>
	</body>
	<script type="text/javascript">
		var arr = ['张三','李四','赵五','钱六','孙七','刘八','吴九','郑十','萧十一','周十二']
//		console.log(arr.length)  
		var span = document.querySelector('span')
		var bt = document.querySelector('button')
	
		function show () {
			var num = Math.floor( Math.random() * arr.length )
			span.innerHTML = arr[num]
		}
		
        var auto
        var count = 0
        bt.onclick = function() {
        	count++
        	if ( count % 2 > 0 ) {     // 奇数次
        		auto = setInterval(show,20)
        		bt.innerHTML = '暂停'
        		bt.style.background = 'red'
        	} else{  // 偶数次
        		clearInterval(auto)
        		bt.innerHTML = '开始'
        		bt.style.background = 'greenyellow'
        	}
        }
	</script>
</html>
